<template>
	<!-- goodlist商品列表 -->
	<view class="g_wp">
		<view class="g_nav">
			<!-- <view class="p_logo">
				<image src="../../static/logo.png" mode=""></image>
				<text>多米街商城-{{titles}}</text>
			</view> -->
			<view class="flex_align_center">
				<uni-icons @click="$navBack()" type="back" size="26"></uni-icons>
				<uni-search-bar class="flex1" @confirm="searchTap"  bgColor="#fff" radius="10" placeholder="搜索本类目下商品" v-model="keywords" @clear="clear" cancelButton="none"></uni-search-bar>
			</view>
			<view class="flex_align_center nav_bar">
				<view class="nav_logo">
					<image :src="classList[0].thumb"></image>
				</view>
				<view class="nav_info">
					<view class="nav_tit">{{classList[0].name}}</view>
					<view class="nav_company">多米街商城</view>
				</view>
				<view class="nav_all" @click="$navTo('/pages/category/category')">全部分类</view>
			</view>
			<view class="g_by flex_center">
				<view class="g_by_item" :class="{'g_by_active':order==''}" @click="menuTap('')">综合排序</view>
				<view class="g_by_item" :class="{'g_by_active':order=='sales'}" @click="menuTap('sales')">销量优先</view>
				<view class="g_by_item" :class="{'g_by_active':order=='agentprice'}" @click="menuTap('agentprice')">低价优先</view>
				<view class="g_by_item" :class="{'g_by_active':order=='createtime'}" @click="menuTap('createtime')">最新上架</view>
			</view>
		</view>
		<view class="g_body">
			<view class="g_list">
				<liu-waterfall :bgColor="'#FBF8FE'" :dataList.sync="list" :column="2" @click="wateClick"></liu-waterfall>
				<view class="empty_loading">
					<image v-show="isloading" src="../../static/business/loading.gif" mode=""></image>
					<text v-show="isempty">没有更多了~</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				brandid: '',
				badgeStyle: '',
				keywords: '',
				classList: [],
				page: 0,
				list: [],
				issearch: false,
				isempty: false,
				isloading: false,
				mid: 0,
				order: ''
			}
		},
		watch: {
			text() {
				this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
			}
		},
		onReachBottom() {
			this.searchList();
		},
		async onLoad(options) {
			this.brandid = options.brandid
			// this.titles = options.cname
			this.getClass();
			if(options.mid){
				this.mid = options.mid;
			}
			// await this.$onLaunched;
			if(!uni.getStorageSync('token')){
				this.getToken();
			}
			
		},
		methods: {
			wateClick(data) {
				this.$navTo('/pages/product/product?id='+data.id)
			},
			getToken(){
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							aid: uni.getStorageSync('appid').slice(-4),
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getSharePath();
							}
						})
					}
				})
			},
			getClass() {
				this.$axios('home/homeclass', 'POST', 'shop', {
					brandid: this.brandid
				}).then(res => {
					if (res.data.code == 200) {
						this.classList = res.data.data;
						if (this.classList.length > 0) {
							this.searchList();
						}else{
							this.isempty = true;
						}
					}
				})
			},
			clear(){
				this.keywords = '';
				this.order = '';
				this.page = 0;
				this.list = [];
				this.searchList();
			},
			menuTap(v) {
				if (v === this.order) return;
				this.order = v;
				this.page = 0;
				this.list = [];
				this.searchList();
			},
			searchTap() {
				if (this.keywords === '') {
					this.$api.msg('请输入搜索内容！');
					return;
				}
				this.page = 0;
				this.list = [];
				this.searchList();
			},
			searchList() {
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('Lists/index', 'POST', 'shop', {
					keywords: this.keywords,
					page: this.page,
					pcate: '',//一级分类
					ccate:this.brandid,//二级分类
					order: this.order,//排序
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let data = res.data.data.goods;
						this.list = [...this.list, ...data];
						this.isempty = data.length <= 0;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/store/icon.css';
	$bage-size: 12px;
	$bage-small: scale(0.7);
	$bage-height: 20px;

	page {
		background-color: #FBF8FE;
		font-size: $font-base;
	}

	.g_nav {
		background: linear-gradient( 180deg, #E3C7FF 0%, #F0E1FF 100%);
		position: fixed;
		top: 0;
		padding: 20rpx;
		padding-top: calc(var(--status-bar-height) + 20rpx);
		padding-bottom: 0;
		width: 100%;
		z-index: 200;
		.uni-searchbar__box{
			justify-content: flex-start;
		}
		.uni-searchbar{
			width: 70%;
		}
		.nav_bar {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			.nav_logo{
				width: 110rpx;
				height: 110rpx;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					border: 4rpx solid #fff;
				}
			}
			.nav_info{
				flex: 1;
				.nav_tit{
					font-size: 32rpx;
				}
				.nav_company{
					background: linear-gradient( 270deg, #8816E1 0%, #B92DF1 100%);
					line-height: 36rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
					width: 130rpx;
					margin-top: 10rpx;
					border-radius: 8rpx;
				}
			}
			.nav_all{
				width: 154rpx;
				line-height: 52rpx;
				background: #8615E1;
				border-radius: 26rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	
	.g_by{
		background: #FBF8FE;
		margin: 0 -20rpx;
		.g_by_item{
			width: 124rpx;
			line-height: 38rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #999999;
			margin: 20rpx;
			text-align: center;
		}
		.g_by_active{
			color: #8816E1;
		}
	}
	.nav_menu {
		background-color: #f2f2f2;
		color: #303133;
		white-space: nowrap;
		width: 100%;
		font-size: 34upx;

		text {
			display: inline-block;
			line-height: 80upx;
			position: relative;
			padding: 0 20upx;
		}

		.active {
			font-weight: bold;
		}

		.active::after {
			border-bottom: 4px $bg-color solid;
			content: '';
			position: absolute;
			bottom: 6upx;
			left: 50%;
			transform: translateX(-50%);
			width: 50upx;
		}
	}

	.g_body {
		padding: calc(var(--status-bar-height) + 320rpx) 20rpx 100rpx;
	}
</style>